<!-- <form action="{% url 'polls:vote' question.id %}" method="post">
    {% csrf_token %}
    <fieldset>
        <legend><h1>{{ question.question_text }}</h1></legend>
        {% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
        {% for choice in question.choice_set.all %}
            <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
            <label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br>
        {% endfor %}
    </fieldset>
    <input type="submit" value="Vote">
    </form> -->



    
    <!-- <form action="{% url 'polls:vote' question.id %}" method="post" style="max-width: 600px; margin: 20px auto; font-family: Arial, sans-serif;">
        {% csrf_token %}
        <fieldset style="border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; background: #f9f9f9;">
            <legend style="font-size: 1.2em; font-weight: bold; color: #333; padding: 0 10px;">
                <h1 style="margin: 0; font-size: 1.5em; color: #2c3e50;">{{ question.question_text }}</h1>
            </legend>
            
            {% if error_message %}
            <p style="color: #e74c3c; background: #fde8e8; padding: 10px; border-radius: 4px; border-left: 4px solid #e74c3c;">
                <strong>{{ error_message }}</strong>
            </p>
            {% endif %}
            
            <div style="margin-top: 20px;">
            {% for choice in question.choice_set.all %}
                <div style="margin-bottom: 12px;">
                    <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}" 
                           style="margin-right: 10px;">
                    <label for="choice{{ forloop.counter }}" 
                           style="display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px; background: white; border-radius: 4px; border: 1px solid #ddd; cursor: pointer; transition: all 0.3s;">
                        <span>{{ choice.choice_text }}</span>
                        {% if choice.votes > 0 %}
                        <span style="background: #f1f1f1; padding: 2px 8px; border-radius: 10px; font-size: 0.8em;">
                            {{ choice.votes }}票
                        </span>
                        {% endif %}
                    </label>
                </div>
            {% endfor %}
            </div>
            
            <input type="submit" value="投票" 
                   style="background: #4CAF50; color: white; border: none; padding: 12px 20px; border-radius: 4px; cursor: pointer; font-size: 1em; width: 100%; margin-top: 10px; transition: background 0.3s;">
        </fieldset>
    </form> -->

    <form action="{% url 'polls:vote' question.id %}" method="post" style="font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px;">
        {% csrf_token %}
        <div style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); padding: 30px; position: relative;">
            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, #3498db, #2ecc71);"></div>
            
            <div style="text-align: center; margin-bottom: 30px;">
                <h1 style="color: #2c3e50; margin: 0 0 10px 0; font-weight: 600; font-size: 1.8rem; line-height: 1.3;">{{ question.question_text }}</h1>
                <p style="color: #7f8c8d; margin: 0; font-size: 1rem;">请选择您的答案</p>
            </div>
    
            {% if error_message %}
            <div style="background: #fde8e8; color: #e74c3c; padding: 15px; border-radius: 8px; margin-bottom: 25px; display: flex; align-items: center;">
                <svg style="width: 20px; height: 20px; fill: #e74c3c; margin-right: 10px;" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
                </svg>
                <strong>{{ error_message }}</strong>
            </div>
            {% endif %}
    
            <div style="margin-bottom: 30px;">
                {% for choice in question.choice_set.all %}
                <label style="display: block; margin-bottom: 15px; cursor: pointer;">
                    <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}" style="display: none;">
                    <div style="background: #f8f9fa; border-radius: 8px; padding: 18px 20px; transition: all 0.3s ease; position: relative; overflow: hidden; border: 2px solid #ecf0f1;">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <span style="font-weight: 500; color: #2c3e50; position: relative; z-index: 2;">{{ choice.choice_text }}</span>
                            {% if choice.votes > 0 %}
                            <span style="background: rgba(255, 255, 255, 0.9); padding: 3px 10px; border-radius: 10px; font-size: 0.85rem; color: #3498db; font-weight: 600; position: relative; z-index: 2;">
                                {{ choice.votes }}票
                            </span>
                            {% endif %}
                        </div>
                        <div style="position: absolute; top: 0; left: 0; width: 0; height: 100%; background: linear-gradient(90deg, rgba(52, 152, 219, 0.1), rgba(46, 204, 113, 0.1)); transition: width 0.3s ease; z-index: 1;"></div>
                    </div>
                </label>
                {% endfor %}
            </div>
    
            <div style="display: flex; justify-content: space-between;">
                <a href="{% url 'polls:index' %}" style="background: #f8f9fa; color: #7f8c8d; text-decoration: none; padding: 12px 25px; border-radius: 8px; font-weight: 500; display: inline-flex; align-items: center; transition: all 0.3s ease;">
                    <svg style="width: 16px; height: 16px; fill: #7f8c8d; margin-right: 8px;" viewBox="0 0 24 24">
                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                    </svg>
                    返回列表
                </a>
                <button type="submit" style="background: linear-gradient(135deg, #3498db, #2ecc71); color: white; border: none; padding: 12px 30px; border-radius: 8px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);">
                    提交投票
                    <svg style="width: 16px; height: 16px; fill: white; margin-left: 8px;" viewBox="0 0 24 24">
                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
                    </svg>
                </button>
            </div>
        </div>
    </form>
    
    <script>
    // 添加单选按钮的交互效果
    document.querySelectorAll('input[type="radio"]').forEach(radio => {
        const label = radio.closest('label');
        const bgHighlight = label.querySelector('div > div:last-child');
        
        radio.addEventListener('change', function() {
            if (this.checked) {
                document.querySelectorAll('input[type="radio"]').forEach(r => {
                    r.closest('label').querySelector('div').style.borderColor = '#ecf0f1';
                    r.closest('label').querySelector('div > div:last-child').style.width = '0';
                });
                label.querySelector('div').style.borderColor = '#3498db';
                bgHighlight.style.width = '100%';
            }
        });
        
        label.addEventListener('mouseenter', function() {
            if (!radio.checked) {
                bgHighlight.style.width = '30%';
            }
        });
        
        label.addEventListener('mouseleave', function() {
            if (!radio.checked) {
                bgHighlight.style.width = '0';
            }
        });
    });
    </script>
    <!-- 添加到results.html、detail.html和index.html的底部 -->
<footer style="font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; background: #2c3e50; color: white; padding: 40px 20px; margin-top: 60px;">
    <div style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px;">
        <!-- 网站信息 -->
        <div>
            <h3 style="color: #ecf0f1; font-size: 1.5rem; margin-bottom: 20px; position: relative; display: inline-block;">
                <span style="position: absolute; bottom: -8px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #3498db, #2ecc71);"></span>
                投票系统
            </h3>
            <p style="color: #bdc3c7; line-height: 1.6; margin-bottom: 20px;">
                一个简洁高效的在线投票平台，帮助您快速收集用户意见。
            </p>
            <div style="display: flex; gap: 15px;">
                <a href="#" style="color: white; text-decoration: none;">
                    <svg style="width: 24px; height: 24px; fill: currentColor;" viewBox="0 0 24 24">
                        <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/>
                    </svg>
                </a>
                <a href="#" style="color: white; text-decoration: none;">
                    <svg style="width: 24px; height: 24px; fill: currentColor;" viewBox="0 0 24 24">
                        <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
                    </svg>
                </a>
                <a href="#" style="color: white; text-decoration: none;">
                    <svg style="width: 24px; height: 24px; fill: currentColor;" viewBox="0 0 24 24">
                        <path d="M12 2.04c-5.5 0-10 4.49-10 10.02 0 5 3.66 9.15 8.44 9.9v-7H7.9v-2.9h2.54V9.85c0-2.51 1.49-3.89 3.78-3.89 1.09 0 2.23.19 2.23.19v2.47h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.45 2.9h-2.33v7a10 10 0 0 0 8.44-9.9c0-5.53-4.5-10.02-10-10.02z"/>
                    </svg>
                </a>
            </div>
        </div>
 <!-- 快速链接 -->
      <div>
    <h3 style="color: #ecf0f1; font-size: 1.2rem; margin-bottom: 20px;">快速链接</h3>
    <ul style="list-style: none; padding: 0; margin: 0;">
        <li style="margin-bottom: 12px;">
            <a href="{% url 'polls:index' %}" style="color: #bdc3c7; text-decoration: none; transition: color 0.3s; display: flex; align-items: center;">
                <svg style="width: 16px; height: 16px; fill: #3498db; margin-right: 8px;" viewBox="0 0 24 24">
                    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
                </svg>
                投票首页
            </a>
        </li>
        <li style="margin-bottom: 12px;">
            <a href="/admin/" style="color: #bdc3c7; text-decoration: none; transition: color 0.3s; display: flex; align-items: center;">
                <svg style="width: 16px; height: 16px; fill: #d35400; margin-right: 8px;" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
                </svg>
                管理员后台
            </a>
        </li>
        <li style="margin-bottom: 12px;">
            <a href="#" style="color: #bdc3c7; text-decoration: none; transition: color 0.3s; display: flex; align-items: center;">
                <svg style="width: 16px; height: 16px; fill: #2ecc71; margin-right: 8px;" viewBox="0 0 24 24">
                    <path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
                </svg>
                常见问题
            </a>
        </li>
        <li style="margin-bottom: 12px;">
            <a href="#" style="color: #bdc3c7; text-decoration: none; transition: color 0.3s; display: flex; align-items: center;">
                <svg style="width: 16px; height: 16px; fill: #e74c3c; margin-right: 8px;" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"/>
                </svg>
                隐私政策
            </a>
        </li>
    </ul>
</div>
        <!-- 联系方式 -->
        <div>
            <h3 style="color: #ecf0f1; font-size: 1.2rem; margin-bottom: 20px;">联系我们</h3>
            <ul style="list-style: none; padding: 0; margin: 0;">
                <li style="margin-bottom: 12px; color: #bdc3c7; display: flex; align-items: center;">
                    <svg style="width: 16px; height: 16px; fill: #9b59b6; margin-right: 8px;" viewBox="0 0 24 24">
                        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                    </svg>
                    contact@polls.com
                </li>
                <li style="margin-bottom: 12px; color: #bdc3c7; display: flex; align-items: center;">
                    <svg style="width: 16px; height: 16px; fill: #1abc9c; margin-right: 8px;" viewBox="0 0 24 24">
                        <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
                    </svg>
                    +86 138-XXXX-XXXX
                </li>
                <li style="margin-bottom: 12px; color: #bdc3c7; display: flex; align-items: center;">
                    <svg style="width: 16px; height: 16px; fill: #f39c12; margin-right: 8px;" viewBox="0 0 24 24">
                        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                    </svg>
                    海南经贸职业技术学院
                </li>
            </ul>
        </div>
    </div>

    <!-- 版权信息 -->
    <div style="border-top: 1px solid rgba(255,255,255,0.1); margin-top: 40px; padding-top: 20px; text-align: center; color: #7f8c8d; font-size: 0.9rem;">
        <p style="margin: 0;">© 2025 投票系统. 保留所有权利</p>
    </div>
</footer>